<template>
  <div class="rightBottomBox">
    <ul>
      <li>
        <div>
          <b>
            <i class="iconfont icon-wendu" />
          </b>
          <span>
            <p>温度</p>
            <em>{{environmentObj.temperature}}</em>°C
          </span>
        </div>
      </li>
      <li>
        <div>
          <b>
            <i class="iconfont icon-yemianshidu" />
          </b>
          <span>
            <p>湿度</p>
            <em>{{environmentObj.humidity}}</em>%
          </span>
        </div>
      </li>
      <li>
        <div>
          <b>
            <i class="iconfont icon-fenchen" />
          </b>
          <span>
            <p>粉尘</p>
            <em>{{environmentObj.dust}}</em>ug/m3
          </span>
        </div>
      </li>
      <li>
        <div>
          <b>
            <i class="iconfont icon-daqiyali" />
          </b>
          <span>
            <p>压力</p>
            <em>{{environmentObj.pressure}}</em>kpa
          </span>
        </div>
      </li>
      <li>
        <div>
          <b>
            <i class="iconfont icon-suffix-voc" />
          </b>
          <span>
            <p>VOC</p>
            <em>{{environmentObj.voc}}</em>ppm
          </span>
        </div>
      </li>
      <li>
        <div>
          <b>
            <i class="iconfont icon-keranqiti" />
          </b>
          <span>
            <p>可燃气体</p>
            <em>{{environmentObj.gas}}</em>%
          </span>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  props: {
    environmentObj: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {}
  },
  watch: {},
  mounted() {},
  methods: {}
}
</script>
<style lang='scss' scoped>
.rightBottomBox {
  height: calc(100% - 40px);
  ul {
    height: 100%;
    li {
      width: 50%;
      height: 33.333%;
      float: left;
      color: #fff;
      div {
        background: rgba(82, 99, 230, 0.2);
        margin: 10px;
        height: calc(100% - 20px);
        font-size: 16px;
        b {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 45%;
          height: 100%;
          font-weight: normal;
          float: left;
          i {
            font-size: 50px;
          }
        }
        span {
          float: left;
          width: 55%;
          height: 100%;
          font-size: 14px;
          p {
            display: block;
            width: 100%;
            font-size: 20px;
            margin: 0;
            height: 50%;
            display: flex;
            justify-content: left;
            align-items: center;
          }
          em {
            font-style: normal;
            font-size: 25px;
            // text-shadow: 5px 5px 5px #0c0058;
            background: linear-gradient(to bottom, #f5f5f5, #1eb6fe);
            -webkit-background-clip: text;
            color: transparent;
          }
        }
      }
    }
  }
}
</style>
